<template>
    <div>
        <Card :bordered="false" dis-hover class="ivu-mt pt10">

            <template>
                <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="120">
                    <FormItem :label="$t('page.supplier.supplier_code')" prop="supplier_name">
                      <p>{{formValidate.code}}</p>
                    </FormItem>
                    <FormItem :label="$t('page.customer.company')+':'" prop="supplier_name">
                        <p>{{formValidate.supplier_name}}</p>
                    </FormItem>
                    <FormItem :label="$t('page.supplier.en_name')+':'" prop="supplier_name">
                      <p>{{formValidate.en_name}}</p>
                    </FormItem>
                    <FormItem :label="$t('page.customer.email')+':'" prop="email">
                      {{ formValidate.email }}
                    </FormItem>
                    <FormItem :label="$t('page.supplier.main_product')+':'" >
                      {{ formValidate.sales_type }}
                    </FormItem>
                    <FormItem :label="$t('page.supplier.contact_person')+':'" prop="name">
                        {{formValidate.name}}
                    </FormItem>
                    <FormItem :label="$t('page.customer.phone')+':'" prop="phone">
                      {{  formValidate.phone }} <a @click="onShow('phone')">{{$t('page.supplier.change')}}</a>
                    </FormItem>
                    <FormItem :label="$t('page.customer.address')+':'" prop="detailed_address">
                      {{ formValidate.address }}
                    </FormItem>
                    <FormItem :label="$t('page.supplier.password')+':'">
                      <Input v-model="formValidate.pwd" disabled type="password" password placeholder="*******" style="width: 200px;margin-right: 5px;" />
                       <a @click="onShow('pwd')">{{$t('page.supplier.change')}}</a>
                    </FormItem>
                </Form>
              <Modal
                  v-model="phone_show"
                  scrollable
                  :title="$t('page.customer.phone')+$t('page.supplier.change')"
                  :closable="true"
                  width="60%"
                  :footer-hide="true"
                  :mask-closable="false"
              >
                <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="120">
                  <FormItem :label="$t('page.customer.phone')+':'" prop="phone">
                    <el-input
                        type="text"
                        placeholder=""
                        v-model="formValidate.phone"
                        maxlength="11"
                        oninput="value = value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.')"
                        show-word-limit
                    >
                    </el-input>
                  </FormItem>
                </Form>
                <Button type="primary" @click="handleSubmit('phone')">{{ $t('page.order.submit') }}</Button>
              </Modal>
              <Modal
                  v-model="pwd_show"
                  scrollable
                  :title="$t('page.supplier.password')+$t('page.supplier.change')"
                  :closable="true"
                  width="60%"
                  :footer-hide="true"
                  :mask-closable="false"
              >
                <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="120">
                  <FormItem :label="$t('page.order.old')+':'" prop="phone">
                    <el-input
                        type="text"
                        placeholder=""
                        v-model="formValidate.pwd"
                        maxlength="20"
                        show-word-limit
                    >
                    </el-input>
                  </FormItem>
                  <FormItem :label="$t('page.order.new')+':'" prop="phone">
                    <el-input
                        type="text"
                        placeholder=""
                        v-model="formValidate.conf_pwd"
                        maxlength="20"
                        show-word-limit
                    >
                    </el-input>
                  </FormItem>
                </Form>
                <Button type="primary" @click="handleSubmit('pwd')">{{ $t('page.order.submit') }}</Button>
              </Modal>
            </template>
        </Card>
    </div>
</template>

<script>
    import { supplier, putSupplier } from "@/api/setting";
    import { mapMutations } from "vuex";
    export default {
        name: 'index',
        components: {},
        data() {
            return {
                phone_show: false,
                pwd_show:false,
                formValidate: {
                    supplier_name: '',
                    name: '',
                    email: '',
                    phone: '',
                    detailed_address: '',
                    province:0,
                    city:0,
                    area:0,
                    street:0,
                    addressSelect:[],
                    address:''
                },
                addresData: [],
                ruleValidate: {
                    supplier_name: [
                        { required: true, message: '请输入供应商名称', trigger: 'blur' }
                    ],
                    phone: [
                        { required: true, message: '请输入联系电话', trigger: 'blur' },
                    ]
                }
            }
        },
        created() {
            this.getInfo();
        },
        mounted() {
            this.setCopyrightShow({ value: false });
        },
        methods: {
            ...mapMutations('store/layout', [
                'setCopyrightShow'
            ]),
            onShow(name) {
              if (name == "phone") {
                this.phone_show = true
              }else {
                this.pwd_show = true

              }

            },
            getInfo(){
                supplier().then(res=>{
                    this.formValidate = res.data.info;
                    let addressSelect = [];
                    if(res.data.province){
                        addressSelect.push(res.data.province)
                    }
                    if(res.data.city){
                        addressSelect.push(res.data.city)
                    }
                    if(res.data.area){
                        addressSelect.push(res.data.area)
                    }
                    if(res.data.street){
                        addressSelect.push(res.data.street)
                    }
                    this.formValidate.addressSelect = addressSelect;
                }).catch(err=>{
                    this.$Message.error(err.msg);
                })
            },
            handleSubmit (name) {
              var data ={}
              if (name == "phone") {
                data = {phone:this.formValidate.phone}
              }else if (name == "pwd"){
                data = {pwd:this.formValidate.pwd,conf_pwd:this.formValidate.conf_pwd}
              }
              putSupplier(data).then(res=>{
                this.$Message.success(res.msg)
                this.phone_show = false
                this.pwd_show = false
                this.formValidate.pwd = ""
                this.formValidate.conf_pwd = ""
                // this.formValidate.phone = ""
              }).catch(err=>{
                this.$Message.error(err.msg)
              })

            }
        }
    }
</script>

<style lang="less" scoped>
    .input{
        max-width: 460px;
    }
    .fixed-card {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 200px;
        z-index: 10;
        box-shadow: 0 -1px 2px rgb(240, 240, 240);

        /deep/ .ivu-card-body {
            padding: 15px 16px 14px;
        }

        .ivu-form-item {
            margin-bottom: 0;
        }

        /deep/ .ivu-form-item-content {
            margin-right: 124px;
            text-align: center;
        }

        .ivu-btn {
            height: 36px;
            padding: 0 20px;
        }
    }
</style>
